import React, { useState, useEffect } from 'react';
import { Button, Modal, Table, message } from 'antd';
import { ProductOutlined } from '@ant-design/icons';
import styles from '../zyd/yd.module.css';

const initialData = [
    {
        key: '1',
        appName: '店小秘',
        authType: '常规授权',
        authContent: '编辑模板信息、货品模板直连、货品类...',
        authTime: '2024-03-17 16:23:47',
        validityPeriod: '已过期',
    },
    // 更多数据...
];

export default function Sq() {
    const [authData, setAuthData] = useState(initialData);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [selectedApp, setSelectedApp] = useState(null);
    const [authType, setAuthType] = useState('');
    const [firstLevel, setFirstLevel] = useState('');
    const [secondLevelOptions, setSecondLevelOptions] = useState([]);
    const [selectedSecondLevel, setSelectedSecondLevel] = useState('');

    const columns = [
        {
            title: '应用信息',
            dataIndex: 'appName',
            key: 'appName',
        },
        {
            title: '授权类型',
            dataIndex: 'authType',
            key: 'authType',
        },
        {
            title: '授权内容',
            dataIndex: 'authContent',
            key: 'authContent',
        },
        {
            title: '授权时间',
            dataIndex: 'authTime',
            key: 'authTime',
        },
        {
            title: '授权有效期',
            dataIndex: 'validityPeriod',
            key: 'validityPeriod',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Button type="primary" onClick={() => handleRevokeAuth(record)}>
                    取消授权
                </Button>
            ),
        },
    ];



    // 取消授权
    const handleRevokeAuth = (record) => {
        message.success(`已取消${record.appName}的授权`);
        setAuthData(prevData => prevData.filter(item => item.key !== record.key));
    };

    // 从 localStorage 加载数据
    useEffect(() => {
        const storedData = JSON.parse(localStorage.getItem('authData'));
        if (storedData) {
            setAuthData(storedData);
        }
    }, []);

    // 在更新数据时保存到 localStorage
    useEffect(() => {
        localStorage.setItem('authData', JSON.stringify(authData));
    }, [authData]);

    const handleGetAuth = (appName) => {
        if (!appName) {
            message.error('请选择一个应用程序');
            return;
        }
        setSelectedApp(appName);
        setIsModalVisible(true);
        setFirstLevel(''); // 重置一级分类
        setSelectedSecondLevel(''); // 重置二级分类
        setSecondLevelOptions([]); // 清空二级分类选项
    };

    const handleOk = () => {
        if (!selectedSecondLevel) {
            message.error('请选择二级分类');
            return;
        }
        message.success(`已获取${selectedApp}的${selectedSecondLevel}授权`);
        setAuthData(prevData => [
            ...prevData,
            {
                key: Date.now().toString(),
                appName: selectedApp,
                authType: selectedSecondLevel,
                authContent: '示例授权内容',
                authTime: new Date().toLocaleString(),
                validityPeriod: '未过期',
            },
        ]);
        setIsModalVisible(false);
        setSelectedApp(null);
        setFirstLevel('');
        setSelectedSecondLevel('');
        setSecondLevelOptions([]);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        setSelectedApp(null);
        setFirstLevel('');
        setSelectedSecondLevel('');
        setSecondLevelOptions([]);
    };



    // 模拟一级分类与二级分类的映射关系
    const firstLevelToSecondLevel = {
        '常规授权': ['基础功能', '中级功能', '高级功能'],
        '高级授权': ['VIP功能', '企业功能', '定制功能'],
        '企业授权': ['企业A套餐', '企业B套餐', '企业C套餐'],
    };

    const handleFirstLevelClick = (level) => {
        if (!selectedApp) {
            message.error('请先选择一个应用程序');
            return;
        }
        setFirstLevel(level);
        setSecondLevelOptions(firstLevelToSecondLevel[level] || []);
        setSelectedSecondLevel('');
    };

    const handleSecondLevelClick = (level) => {
        if (!level) {
            message.error('请选择一个二级分类');
            return;
        }
        setSelectedSecondLevel(level);
    };

    const firstLevelOptions = ['常规授权', '高级授权', '企业授权'];

    return (
        <React.Fragment>
            <div className={styles.sqa}>
                <h3>为您推荐</h3>
                <div className={styles.sqc}>
                    <div className={styles.sqcc}>
                        <div><ProductOutlined className={styles.sqb} /></div>
                        <div>
                            <h3>妙手</h3>
                            <Button color="orange" variant="solid" onClick={() => handleGetAuth('妙手')}>
                                获取授权
                            </Button>
                        </div>
                    </div>
                    <div className={styles.sqcc}>
                        <div><ProductOutlined className={styles.sqb} /></div>
                        <div>
                            <h3>芒棒ERP</h3>
                            <Button color="orange" variant="solid" onClick={() => handleGetAuth('芒棒ERP')}>
                                获取授权
                            </Button>
                        </div>
                    </div>
                    <div className={styles.sqcc}>
                        <div><ProductOutlined className={styles.sqb} /></div>
                        <div>
                            <h3>多多</h3>
                            <Button color="orange" variant="solid" onClick={() => handleGetAuth('多多')}>
                                获取授权
                            </Button>
                        </div>
                    </div>
                    <div className={styles.sqcc}>
                        <div><ProductOutlined className={styles.sqb} /></div>
                        <div>
                            <h3>酋长</h3>
                            <Button color="orange" variant="solid" onClick={() => handleGetAuth('酋长')}>
                                获取授权
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
            <Button color="orange" variant="solid" style={{marginTop:'20px'}}>
                获取授权
            </Button>
            <div style={{ marginTop: '20px' }}>
                <Table columns={columns} dataSource={authData} />
            </div>
            <Modal
                title={`选择${selectedApp}的授权类型`}
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <div style={{ display: 'flex' }}>
                    <div style={{ flex: 1, paddingRight: '10px' }}>
                        {firstLevelOptions.map((option) => (
                            <Button
                                key={option}
                                type={firstLevel === option ? 'primary' : 'default'}
                                onClick={() => handleFirstLevelClick(option)}
                                style={{ display: 'block', margin: '5px 0' }}
                            >
                                {option}
                            </Button>
                        ))}
                    </div>
                    <div style={{ flex: 1, paddingLeft: '10px', borderLeft: '1px solid #ccc' }}>
                        {secondLevelOptions.map((option) => (
                            <Button
                                key={option}
                                type={selectedSecondLevel === option ? 'primary' : 'default'}
                                onClick={() => handleSecondLevelClick(option)}
                                style={{ display: 'block', margin: '5px 0' }}
                            >
                                {option}
                            </Button>
                        ))}
                    </div>
                </div>
            </Modal>
        </React.Fragment>
    );
}



